<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>昨天作业2</title>
    <style>
        .container {
            width: 400px;
            min-height: 200px;
            background-color: rgb(218, 218, 218);
            padding: 20px;
            margin: 0 auto;
        }

        .container input {
            width: 250px;
        }

        .input-group {
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <input type="text" placeholder="输入身份证" id="sfz">
        <button id="btn">显示出生日期</button>
        <p id="info"></p>
        <div class="input-group">
            <label for="name">姓名：</label>
            <input type="text" id="name">
        </div>
        <div class="input-group">
            <label for="email">邮箱：</label>
            <input type="email" id="email">
        </div>
        <div class="input-group">
            <label for="tel">电话:</label>
            <input type="text" id="tel">
        </div>
        <div class="input-group">
            <button id="tm-btn">信息脱敏</button>
        </div>
        <div id="tm-info">
            <p>姓名：</p>
            <p>邮箱：</p>
            <p>电话号码：</p>
        </div>

    </div>
    <script>
        //6. 将字符串”border-bottom-color” 转换成驼峰命名”borderBottomColor”
        var str6 = "border-bottom-color"
        var array6 = str6.split('')
        for (var i = 0; i < array6.length; i++) {
            if (array6[i] == '-') {
                array6[i] = ''
                array6[i + 1] = array6[i + 1].toUpperCase()
            }
        }
        var res6 = array6.join("")
        console.log(res6)

        //7. 输入身份证号，点击按钮，显示出生年月，输出格式为："出生年月：xxxx年xx月xx日"
        var btn = document.getElementById('btn');
        var ipt = document.getElementById('sfz');
        var infoEle = document.getElementById('info');

        btn.onclick = function () {
            var sfzNum = ipt.value;
            console.log(sfzNum)
            var year = sfzNum.slice(6, 10);
            var month = sfzNum.slice(10, 12);
            var day = sfzNum.slice(12, 14)
            var birthday = `${year}年${month}月${day}日`
            infoEle.innerText = birthday
        }

        //8-----------
        var nameEle = document.getElementById('name');
        var emailEle = document.getElementById('email');
        var telEle = document.getElementById('tel');
        var tmBtn = document.getElementById('tm-btn')
        var tmInfo = document.getElementById('tm-info')

        tmBtn.onclick = function(){
            var name = nameEle.value.trim()
            var email = emailEle.value.trim()
            var tel = telEle.value.trim()
            while(tel.includes('-')){
                tel = tel.replace('-','')
            }
            var tmName = name[0] + '*' + name.slice(2)
            var tmTel = tel.slice(0,3) + "****" + tel.slice(-4)
            //ponyMa@qq.com
            //找到@符号的索引 idx
            var idx = email.indexOf('@')
            console.log(`@符号的索引是${idx}`)
            var x = ''
            //生成idx个* 赋值给x
            for(var i=0;i<idx;i++){
                x += '*'
            }
            console.log(`生成的*的数量是${idx}，结果是${x}`)
            console.log('emial@符号以后的所有内容包含@符号')
            console.log(email.slice(idx))
            var tmEmail = x + email.slice(idx)
            var hmtl = `
            <p>姓名：${tmName}</p>
            <p>邮箱：${tmEmail}</p>
            <p>电话号码：${tmTel}</p>
            `
            tmInfo.innerHTML = hmtl

        }



    </script>
</body>

</html>